<template>
  <div class='pie-content'>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import { secondToHour, secondToString } from 'src/assets/js/util'
import echarts from 'echarts'

export default {
  name: 'cur-status',
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          process: 0, // 加工
          stop: 0, // 停机
          breaks: 0, // 断开
          offLine: 0, // 离线
          alarm: 0, // 报警
          changeLine: 0, // 换线
          fault: 0, // 故障
          repair: 0 // 维修
        }
      }
    },
    total: {
      type: Number || String,
      default: 0
    }
  },
  data () {
    return {
      chart: null,
      chartColor: {
        process: '#18D77F', // 加工
        stop: '#FF8559', // 停机
        breaks: '#999999', // 断开
        offLine: '#666666', // 离线
        alarm: '#E43434', // 报警
        changeLine: '#AC70F2', // 换线
        fault: '#F7B82D', // 故障
        repair: '#2BD0F7' // 维修
      },
      data: [],
      chartsData: [],
      explain: {
        process: '加工',
        stop: '停机',
        breaks: '断开',
        offLine: '离线',
        alarm: '报警',
        changeLine: '换线',
        fault: '故障',
        repair: '维修'
      }
    }
  },
  watch: {
    info () {
      this.changeInfo()
    }
  },
  mounted () {
    window.addEventListener('resize', () => {
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.resize()
      }
    })
  },
  methods: {
    changeInfo () {
      let data = []
      for (let key in this.info) {
        if (this.info[key] && this.info[key] > 0) {
          data.push({
            value: this.info[key],
            keyName: this.explain[key],
            name: key,
            time: secondToString(this.info[key])
          })
        }
      }
      data = data.map(item => {
        return {
          ...item,
          percent: item.value ? (item.value / this.total * 100).toFixed(1) : 0,
          value: secondToHour(item.value)
        }
      })
      this.data = data
      this.chartsData = data.filter(item => item.value !== 0).sort(function (a, b) {
        return b.value - a.value
      })
      if (this.chartsData.length > 0) {
        this.setOption(this.chartsData)
      } else {
        this.setOption(this.data)
      }
    },
    setOption (data) {
      // const bgData = data.map(item => {
      //   return {
      //     ...item,
      //     value: secondToHour(this.total)
      //   }
      // })
      const option = {
        grid: {
          bottom: '10%',
          left: '10%',
          right: '5%',
          top: '15%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: '',
            label: {
              show: false
            }
          },
          formatter: (params) => {
            let htmlStr = ''
            let value = params[0].data.time
            let color = this.chartColor[params[0].data.name]
            let name = params[0].data.keyName

            htmlStr += '<div>'
            htmlStr += '<span style="margin-right: 5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
            htmlStr += `${name}：` + value
            htmlStr += '</div>'
            return htmlStr
          }
        },
        xAxis: {
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#d3d3d3'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333' // X轴文字颜色
            },
            interval: 0
          },
          type: 'category',
          data: data.map(item => item.keyName)
        },
        yAxis: {
          type: 'value',
          name: '小时',
          nameTextStyle: {
            color: '#333333',
            fontSize: 14
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333'
            }
          },
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#d3d3d3'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#DDD'
            }
          }
        },
        series: [{
          data: data,
          type: 'bar',
          barWidth: 16,
          z: 20,
          stack: 'one',
          itemStyle: {
            normal: {
              color: (params) => {
                return this.chartColor[params.data.name]
              },
              barBorderRadius: [8, 8, 0, 0]
            }
          },
          label: {
            show: true,
            lineHeight: 16,
            height: 16,
            position: [-4, -24],
            distance: 1,
            formatter: (params) => {
              return params.data.percent + '%'
            }
          }
        }]
      }
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .pie-content{
    display flex
    align-items center
    .chart{
      flex 1
      height 220px
    }
    .explain{
      margin-left 10px
      width 140px
      li{
        display inline-block
        width 50%
        &:nth-child(odd){
          /*margin-right 3px*/
        }
        .round{
          margin-right 5px
          display inline-block
          width 10px
          height 10px
          border-radius 5px
        }
        .name{
          margin 19px 0 9px
        }
      }
    }
  }
</style>
